<script setup lang="ts">
import {defineEmits, onMounted, ref} from 'vue';
import {addResourcePermission, getRoles} from "@/apps/admin/utils/rolesApi";
import {ElMessage} from "element-plus";

const emits = defineEmits()
const roleId = ref(null);

const props = defineProps({
  type: String,
  resourceIndex: Number
})

function add(){
  if (!roleId.value){
    ElMessage({message:"请先选择角色", type: 'error'})
    return;
  }
  emits("close")

  addResourcePermission(roleId.value, props.type, props.resourceIndex).then(body => {
    console.log(body)
    if (body.code == 200){
      ElMessage({message: '添加资源权限成功', type: 'success',})
    } else {
      ElMessage({message: body.msg, type: 'error',})
    }
  }).catch(e => {
    console.log(e)
    ElMessage({message: e.response.data.msg, type: 'error',})
  })
}



const options = ref([])
onMounted(() => {
  getRoles().then(body => {
    options.value = body.data.map(role => ({
      value: role.id,
      label: role.name,
    }))
  })
})

</script>

<template>
  <el-dialog style="width: 300px" title="角色资源权限添加">
    <div style="display: flex; flex-direction: column;align-items: center; ">
      <el-select
          v-model="roleId"
          placeholder="选择添加资源的角色"
          size="large"
          style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
      </el-select>
      <el-button @click="add" type="primary" style="width: 240px; margin-top: 10px">提交</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>